<template>
    <div style="height: 400px;overflow: auto">
        <el-row>
            <el-dialog title="岗位列表" :visible="dialogVisible" center width="50%" :before-close="handleClose">
                <el-row style="height: 500px;">
                    <el-col>
                        <el-input v-model="postName" autocomplete="off" placeholder="请输入岗位名">
                            <el-button slot="append" icon="el-icon-search" @click="searchRole"></el-button>
                        </el-input>
                    </el-col>
                    <el-col :span="24">
                        <el-table :data="tableData" ref="multipleTable" border style="width: 100%"
                            @selection-change="handleSelectionChange">
                            <el-table-column type="selection" width="55">
                            </el-table-column>
                            <el-table-column prop="postName" label="岗位名称" align="center"> </el-table-column>
                            <el-table-column prop="postCode" label="岗位编码" align="center"> </el-table-column>
                        </el-table>
                    </el-col>


                </el-row>
                <el-row>
                    <Pagination :pageNum="gather.current" :total="gather.total" :pageSize="gather.size"
                        @sizeChange="sizeChange" @currentChange="currentChange"></Pagination>
                </el-row>

                <span slot="footer" class="dialog-footer">
                    <el-button @click="handleClose">取 消</el-button>
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                </span>
            </el-dialog>
        </el-row>
    </div>
</template>

<script>

import {queryPostList} from '@/api/sys/post.js'
import Pagination from '@/components/Pagination/pagination.vue'

export default {
    components: {
        Pagination
    },
    props: {
        parentPost: {
            type: Array,
            default: []
        }
    },
    data() {
        return {
            dialogVisible: false,
            post: [],
            tableData: [],
            gather: {
                current: 1,//默认第一页
                size: 10,//一页展示10条
                total: 0,
            },
            postName: '',
            multipleSelection: []
        }
    },
    created() {
    },
    methods: {
        //显示弹窗
        show() {
            this.queryAll();
            this.dialogVisible = true;

        },
        // 确定
        submitForm() {
            this.dialogVisible = false;
            this.$parent.setPost(this.multipleSelection)
        },
        handleClose() {
            this.dialogVisible = false;
        },
        // 点击页码及上一页下一页按钮操作
        currentChange(val) {
            this.gather.current = val;
            this.queryAll(); //调用接口方法
        },
        //每页展示几条按钮操作
        sizeChange(val) {
            this.gather.size = val;
            this.queryAll(); //调用接口方法
        },
        queryAll() {
            queryPostList({
                current: this.gather.current,
                size: this.gather.size,
                postName: this.postName
            }).then(res => {
                if (res.code === 200) {
                    this.tableData = res.data.records;
                    this.gather.total = res.data.total;
                    if (this.parentPost !== undefined && this.parentPost.length > 0) {

                        this.parentPost.forEach(row => {
                            //         console.log(row)
                            this.$refs.multipleTable.toggleRowSelection(row, true);
                            this.$nextTick(() => {
                                this.tableData.find(obj => { // userData 表单数据
                                    if (row.roleId === obj.roleId) {
                                        this.$refs.multipleTable.toggleRowSelection(obj, true)
                                    }
                                })
                            })
                        })
                    }
                }

            });
        },
        searchRole() {

        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
    }

}
</script>

<style></style>